Confirm?

Are you sure you want to proceed?
S
Sathya

Fullstack Developer Portfolio Page

Clone & Customize via AI

Tailwind Portfolio is a Blazor single-page portfolio with a responsive Tailwind layout, skill cards, and project tiles. Includes a contact EditForm with DataAnnotations validation.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Gradient hero section with CTA and circular profile image - Responsive skills grid rendering SkillModel entries with icons and categories - Project cards with image, description, technology tags, demo and code links - Contact form implemented with EditForm, DataAnnotationsValidator and ValidationMessage - Navigation and footer with social icons ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputTextArea with @bind-Value - Razor foreach loops to render SkillModel and ProjectModel lists - Standard HTML img and anchor tags; Font Awesome icon classes used for icons ## How it works - ContactModel, ProjectModel, and SkillModel provide typed properties and DataAnnotations for validation - EditForm binds to contactModel and invokes HandleSubmit on valid submit - ValidationMessage components display field-level errors triggered by DataAnnotations - Projects and skills render from in-memory lists in the @code block; links and images use placeholder values ## Styling - Uses Tailwind utility classes (container, grid, flex, gap-*, px-*, text-*, bg-gradient-to-r) for layout and responsive behavior - Grid classes (grid-cols-*, md:grid-cols-*) provide breakpoints for cards and skills - Images use object-cover and fixed heights; rounded-full creates circular profile image ## Reuse steps 1. Copy Razor page and model classes into a Blazor Server or Blazor WebAssembly project. 2. Add Tailwind-generated CSS or include a compiled Tailwind file in index.html/_Host and include Font Awesome. 3. Ensure System.ComponentModel.DataAnnotations is available for validation attributes. 4. Replace placeholder data with real data sources or inject HttpClient/Scoped services and wire endpoints. 5. Implement a server-side endpoint or function to receive contact submissions and handle persistence or email. ## Limitations & next steps - Contact form submission is a stub (HandleSubmit contains a TODO); backend integration required for real messages. - All data is in-memory; add APIs, paging, and dynamic loading for large project lists. - No authentication or CMS integration included; extract card UIs into reusable components for reuse. - Recommend adding ARIA attributes, keyboard focus management, and tests for accessibility and reliability.